<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="arealist">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{ this.$store.state.city }}</div>
                    </div>
                </div>
            </div>
            <div class="arealist">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="item in hot" :key="item.id" @click="handleCityClick(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="arealist" v-for="(item,index) in cities" :key="index" :ref="index" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
                <div class="title border-topbottom">
                    {{index}}      
                </div>
                <div class="item-list">
                    <div class="item border-bottom" v-for="(chlid,index) in item" :key="chlid.id" @click="handleCityClick(chlid.name)">{{chlid.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
  props: {
    cities: Object,
    hot: Array,
    letter:String,
  },
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper);
  },
  methods: {
    handleCityClick(city) {
      this.$store.commit("changeCityValue", city);
      this.$router.push("/")
    },
    handleTouchStart() {
      this.touchStatus = true;
      console.log(this.$refs["A"][0].offsetTop);
    },
    handleTouchMove(e) {
      this.timer = setTimeout(() => {
        const touchY = e.touches[0].clientY - 182;
        // console.log(touchY);
        const index=Math.floor(touchY-(this.$refs["A"][0].offsetTop))
        console.log(index);
      }, 100);
    },
    handleTouchEnd() {
      this.touchStatus = false;
    }
  },
  watch:{
	letter(){
		console.log(this.letter)
		if (this.letter) {
			const element = this.$refs[this.letter][0]
			console.log(element)
			this.scroll.scrollToElement(element)
		}
	}
}
};
</script>

<style lang="scss" scoped>
.border-topbottom {
  border-color: #ccc;
}
.list {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  top: 1.7rem;
  left: 0;
  right: 0;
  bottom: 0;
  .title {
    line-height: 0.54rem;
    background: #eee;
    padding-left: 0.2rem;
    color: #666;
    font-size: 0.26rem;
  }
  .button-list {
    overflow: hidden;
    padding: 0.1rem 0.5rem 0.1rem 0.1rem;
    .button-wrapper {
      float: left;
      width: 33%;
      .button {
        margin: 0.1rem;
        padding: 0.1rem 0;
        text-align: center;
        border: 0.02rem solid #ccc;
        border-radius: 0.06rem;
      }
    }
  }
  .item-list {
    .item {
      line-height: 0.75rem;
      padding-left: 0.2rem;
    }
  }
}
</style>